import React, { FC, useState } from 'react'
import addressbgUrl from '@/assets/images/address-bg.png'
import { useNavigate } from 'react-router-dom'
import { StuAdd } from '@/types/address/userAdd'
import { useAppSelector, useAppDispatch } from '@/store'
import { selectCurrendStdAdd, selectStdAddList } from '@/store/address'
import pic_addressUrl from '@/assets/images/pic_address.png'
import Styles from './emptyAddress.module.less'

export const EmptyAddress: FC<{}> = () => {
  const navigate = useNavigate()
  return (
    <div
      className="p-r1.2 h-r8.5 pl-r4.4 relative"
      onClick={() => {
        navigate('/addressSelect')
      }}
    >
      <img alt="" className=" absolute left-r1.2 top-r3.2 w-r2.0 h-auto" src={pic_addressUrl}></img>
      <div className=" text-r1.6 font-medium h-r2.0 leading-r2  ">无收货地址，去添加</div>
      <span className=" w-r2.0 h-r2.0 inline-block text-gray-666666 absolute right-r1.0 top-r3.0">
        <i className="w-r2.0 h-r2.0 iconfont icon-icon_arrow_right"></i>
      </span>
      <div className=" text-r1.6 font-medium h-r1.8 leading-r1.8  text-gray-333333 mb-r0.7 ">
        <div className={Styles['record']}>{'课程讲义（赠品）将邮寄至此地址'}</div>
      </div>
    </div>
  )
}

export const StdAddress: FC<{ currendStdAdd: Partial<StuAdd>; notShowBar: boolean }> = (props) => {
  const navigate = useNavigate()
  const currendStdAdd = props.currendStdAdd
  const dispatch = useAppDispatch() //          dispatch(incrementByAmount(100))
  return (
    <div
      className="p-r1.2 h-r8.5 pl-r4.4 relative"
      onClick={() => {
        if (!props.notShowBar) {
          navigate('/addressSelect')
        }
      }}
    >
      <img alt="" className=" absolute left-r1.2 top-r3.2 w-r2.0 h-auto" src={pic_addressUrl}></img>
      <div className=" text-r1.2 font-normal text-gray-666666 h-r1.2 leading-r1.2 mb-r0.7 ">
        <span>{currendStdAdd?.province_name}</span> <span>{currendStdAdd?.city_name}</span>{' '}
        <span>{currendStdAdd?.county_name}</span>
      </div>
      <div className=" text-r1.6 font-medium h-r1.8 leading-r1.8  text-gray-333333 mb-r0.7 ">
        {currendStdAdd?.detail}{' '}
        <span className=" w-r2.0 h-r2.0 inline-block text-gray-F7F7F8 absolute right-r1.0">
          {!props.notShowBar ? (
            <i className="w-r2.0 h-r2.0 iconfont icon-icon_arrow_right"></i>
          ) : null}
        </span>
      </div>
      <div>
        <span className="text-r1.2 font-normal leading-r1.3 text-gray-666666">
          <span>{currendStdAdd?.name} </span>
          <span>{currendStdAdd?.phone}</span>
        </span>
      </div>
    </div>
  )
}

const Address: FC<{}> = () => {
  const navigate = useNavigate()
  const currendStdAdd = useAppSelector(selectCurrendStdAdd)
  return (
    <div className="w-auto h-auto bg-white  shadow-bs5 m-r1.2  rounded-r0.8">
      {/* <div className="p-r1.0 text-center text-orange-E29A09 bg-orange-FFF5E0 h-r3.6">
        当前下单账号为为：156***0958
      </div> */}
      {currendStdAdd ? (
        <StdAddress currendStdAdd={currendStdAdd} notShowBar={false}></StdAddress>
      ) : (
        <EmptyAddress></EmptyAddress>
      )}
      {/* <EmptyAddress></EmptyAddress> */}
    </div>
  )
}

export default Address
